<template>
  <view class="app-container">
    <image class="background" src="/static/images/background.png" mode="aspectFill"></image>

    <view :style="{ marginTop: titleMargin + 'px' }" class="title">{{ title }}</view>

    <view class="vip-box" v-if="role_id && role_name">
      <view class="wdtg-box" v-if="role_id > 1" @click="goShare">
        <image class="wdtg-icon" src="/static/images/wdtg_icon.png"></image>
        <view class="wdtg">我的推广</view>
      </view>
      <view class="vip">
        当前会员等级：{{ role_name }}
      </view>
    </view>

    <block v-if="!is_ios">
      <view class="service-box">
        <image class="service" mode="aspectFill" @click="goService(item.id)" :src="item.img" v-for="(item, index) in service_list" :key="index"></image>
      </view>
    </block>
    <block v-else>
      <view class="ios-box">
        <text>尊敬的用户：</text>
        <text class="msg">暂不提供IOS的会员服务购买，如有疑问，请点击下方按钮，联系客服咨询</text>
        <view class="btn-box">
          <button class="contact" open-type="contact" plain>联系客服</button>
        </view>
      </view>
    </block>


    <CustomTabBar :tabList="tabList" :currentTab="currentTab" @change="changeTab"/>
  </view>
</template>

<script>
import http from '@/utils/http'

export default {
  data() {
    return {
      tabList: [],
      currentTab: '',
      service_list: [],
      swiperIndex: 0, // 当前轮播图索引
      title: '',
      titleMargin: 0, // 动态顶部间距
      role_id: 0,
      role_name: '',
      is_ios: false
    };
  },

  created() {
    var tab_list = uni.getStorageSync('tab_list');
    if (tab_list) this.tabList = tab_list;

    this.getTabList(); // 获取 TabList
    this.setDynamicMargin(); // 设置动态间距
  },

  onShow() {
    var user_id = uni.getStorageSync('user_id') ? uni.getStorageSync('user_id') : 0;
    if (user_id == 0) uni.hideShareMenu();  // 隐藏系统分享按钮
  },
  onShareAppMessage() {
    var user_id = uni.getStorageSync('user_id') ? uni.getStorageSync('user_id') : 0;
    return {
      title: '喜到啦诚邀您的加入',
      path: '/pages/service/service?scene=' + user_id,
      imageUrl: http.config.baseURL + '/static/xcx/share.png'
    };
  },

  onLoad: function (options) {
    var user_id = uni.getStorageSync('user_id') ? uni.getStorageSync('user_id') : 0,
      scene_user_id = options.scene ? options.scene : 0;

    if (uni.getSystemInfoSync().osName == 'ios') this.is_ios = true;

    if (scene_user_id > 0) {
      uni.setStorageSync('scene_user_id', scene_user_id);
      if (user_id > 0) {
        this.$http.post('/index/Api/bindUser', {user_id, scene_user_id}).then(res => {
          if (res.data.result === 1) {
            uni.removeStorageSync('scene_user_id')
          }
        })
      }
    }

    this.$http.post('/index/Api/serviceList').then(res => {
      if (res.data.result == 1) {
        this.service_list = res.data.data;
      }
    });
  },

  onShow: function (){
    var user_id = uni.getStorageSync('user_id') ? uni.getStorageSync('user_id') : 0;
    if (user_id > 0) {
      this.loadUserCenter(user_id);
    }
  },

  methods: {
    loadUserCenter: function (user_id) {
      var scene_user_id = uni.getStorageSync('scene_user_id') ? uni.getStorageSync('scene_user_id') : 0;
      this.$http.post('/index/Api/userCenter', {user_id, scene_user_id}).then(res => {
        if (res.data.result == 1) {
          // 存储认证状态
          uni.setStorageSync('rz_status', res.data.data.rz_status)
          uni.setStorageSync('avatar', res.data.data.avatar);

          this.role_id = res.data.data.role_id;
          this.role_name = res.data.data.role_name;
          if (res.data.data.up_user_id > 0) uni.removeStorageSync('scene_user_id');
        }
      })
    },

    getTabList() {
      this.$http.post('/index/Api/getTabbar').then(res => {
        if (JSON.stringify(this.tabList) !== JSON.stringify(res.data.data)) {
          uni.setStorageSync('tab_list', res.data.data);
          this.tabList = res.data.data;
        }
        // 默认选中的 Tab
        this.currentTab = this.tabList[1].path;
        this.title = this.tabList[1].text;
      });
    },
    changeTab(path) {
      this.currentTab = path;
      uni.redirectTo({url: path}); // 切换到指定的页面
    },
    setDynamicMargin() {
      const windowInfo = uni.getWindowInfo();
      this.titleMargin = windowInfo.statusBarHeight + 10; // 直接使用状态栏高度
    },

    change: function (e) {
      this.swiperIndex = e.detail.current;
    },

    changeSwiper(direction) {
      // 计算新的索引
      const newIndex = this.swiperIndex + direction;
      if (newIndex >= 0 && newIndex < this.service_list.length) {
        this.swiperIndex = newIndex; // 更新索引
      }
    },

    goService: function (id) {
      uni.navigateTo({
        url: '/pages/service_detail/service_detail?id=' + id
      })
    },

    goArticle: function (id) {
      uni.navigateTo({
        url: '/pages/article/article?id=' + id
      })
    },

    goShare: function () {
      uni.navigateTo({
        url: '/pages/share/share'
      })
    },
  },
}
</script>

<style lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10rpx;

  button {
    border: none;
    padding: 0;
    margin: 0;
  }

  .title {
    font-size: 40rpx;
    text-align: center;
  }

  .vip-box {
    width: 91%;
    height: 260rpx;
    background: $main-background;
    margin: 40rpx 0;
    border-radius: 20rpx;
    position: relative;
    display: flex;
    align-items: center;

    .wdtg-box {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .wdtg-icon {
        width: 40rpx;
        height: 50rpx;
      }

      .wdtg {
        font-size: 42rpx;
        margin-left: 20rpx;
        color: #F30E0E;
      }
    }

    .vip {
      font-size: 40rpx;
      font-weight: bold;
      margin-left: 40rpx;
    }
  }

  .ios-box{
    width: calc(91% - 80rpx);
    background: $main-background;
    margin: 40rpx 0;
    border-radius: 20rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 80rpx 40rpx;

    text{
      font-size: 36rpx;
      color: $main-blank;
    }
    .msg{
      margin-top: 20rpx;
      text-indent: 2em;
    }

    .btn-box{
      display: flex;
      justify-content: center;
      .contact{
        margin-top: 50rpx;
        border-radius: 50rpx;
        border: 2rpx solid $main-color;
        color: $main-color;
        padding: 0 120rpx;
      }
    }

  }

  .service-box {
    height: calc(100vh - 650rpx);
    width: 91%;
    overflow-y: auto;

    .service {
      width: 100%;
      height: 350rpx;
      margin-bottom: 20rpx;
      border-radius: 20rpx;
    }
  }

}
</style>
